<template>
<div id= "app">
 <h1>X: {{x}}     Y: {{y}}</h1>
<h1 v-if ="loading">loading .....</h1>
<img v-if ="loaded" :src="result[0].url">
<model :isopen="modelIsOpen" @close-model="onModelClose">my name is zhanghao </model>
<button @click="openModel">打开</button>
<Suspense>
  <template #default>
    <div>
      <dog-show />
      <async-show />
    </div>
  </template>
  <template #fallback>
   <h1> loading</h1>
  </template>
</Suspense>
<p>{{err}}</p>
</div>
 
</template>

<script lang="ts">
import {ref,computed,reactive,toRefs,onMounted,onUpdated,watch,onUnmounted,onErrorCaptured} from "vue"
import useMousePosition from './hooks/useMousePosition'
import useURLLoader from './hooks/useURLLoader'
import model from './components/Model.vue'
import asyncShow from './components/AsyncShow.vue'
import dogShow from './components/DogShow.vue'

interface CatResult {
  id: string;
  url: string;
  width: number;
  height: number;
}

interface DogResulr {
  message: string;
  status: string;
}
interface DataProps {
  count: number;
  double: number;
  increase: () => void;
  numbers: number[];
  person: { name?: string };
}

export default {
  name:'App',
  components: {
    model,
    asyncShow,
    dogShow
  },
  setup() {
    const {x,y} = useMousePosition()
    const {result, loaded, loading} = useURLLoader<CatResult[]>('http://192.168.137.1:3000/arrys')
    const modelIsOpen = ref(false)
    const openModel = () =>{
      modelIsOpen.value = true
    }
    const onModelClose = () =>{
      modelIsOpen.value = false
    }
    const err = ref(null)
    onErrorCaptured((e: any) =>{
      err.value =e 
      return true
    })
    watch(result,() =>{
      if(result.value){
        console.log(result)
      }
    })
   return {
     x,
     y,
     result,
     loaded,
     loading,
     openModel,
     onModelClose,
     modelIsOpen,
     err
   }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  
}
li {
  list-style: none;
}
</style>
